<template>
	<view class="page-box">
		<image :src="imgMsg.poster" mode="widthFix" class="invitation-bg" @longpress="code" />

		<button class="flex align share-btn" @click="open('popup')">
			<view class="share-text">立即邀请好友</view>
		</button>

		<uni-popup ref="popup" type="bottom">
			<view class="popupBigBox">
				<view class="pop-box">
					<view class="between align invite-box">
						<!--  #ifdef APP-PLUS -->
						<!-- 微信 -->
						<view class="invite-btn flex" @click="onShare('WXSceneSession')">
							<image src="https://wx.2024csnl.com/static/weixin.png"></image>
							<view>分享至微信</view>
						</view>
						<!-- 朋友圈 -->
						<view class="invite-btn flex" @click="onShare('WXSceneTimeline')">
							<image src="https://wx.2024csnl.com/static/pengyouquan.png"></image>
							<view>分享至朋友圈</view>
						</view>
						<!--  #endif -->
						<!-- 复制 -->
						<view class="invite-btn flex" @click="copyCode(imgMsg.poster)">
							<image src="https://wx.2024csnl.com/static/lianjie.png"></image>
							<view>复制链接</view>
						</view>
					</view>
				</view>
				<view class="cancelBtn" @click="close('popup')">
					取消
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		sharePoster
	} from "../../api/index.js"
	export default {
		data() {
			return {
				imgMsg: {},
			}
		},
		onLoad() {
			this.getSharePoster()
		},
		methods: {
			open(n) {
				this.$refs[n].open();
			},
			close(n) {
				this.$refs[n].close();
			},
			async getSharePoster() {
				const res = await sharePoster('s=/ApiAgent/poster')
				const {
					data,
					status,
					msg
				} = res.data
				console.log(res, "res")
				if (status == 1) {
					this.imgMsg = data
				} else {
					this.showToast(msg)
				}
			},
			onShare(type) {
				uni.showLoading({
					title: '加载中...'
				})
				setTimeout(()=>{
					uni.hideLoading()
				},2000)
				// console.log(this.QRImg,"QRImg")
				uni.share({
					provider: "weixin",
					scene: type,
					type: 2,
					imageUrl: this.imgMsg.poster,
					success(res) {
						
						this.showToast('分享成功~')
						this.close('popup')
						// console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			// 长按保存二维码
			code(url) {
				uni.downloadFile({
					url: this.imgMsg.poster,
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								uni.showToast({
									title: "保存成功！"
								})
							},
							fail: (err) => {
								console.log(err)
							}
						})
					}
				})
			},
			// 复制二维码链接
			copyCode(e) {
				uni.setClipboardData({
					data: e,
					success: () => {
						uni.showToast({
							title: "复制成功"
						})
						this.close('popup')
					}
				});
			},

			checkItem(i) {
				this.checkIndex = i
			}
		}
	}
</script>

<style>
	page {
		background-color: #41644A;
	}
</style>

<style lang="scss" scoped>
	.popupBigBox {
		background-color: #FFF;
		border-radius: 40rpx 40rpx 0 0;

		.cancelBtn {
			border-top: 10rpx solid #F5F5F5;
			padding: 50rpx 0;
			text-align: center;
		}

		.pop-box {
			padding: 50rpx;
			height: 12vh;
			overflow-y: auto;
		}
	}



	.invite-box {

		.invite-btn {
			flex-direction: column;
			align-items: center;
			margin-right: 26rpx;
			color: #333333;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-bottom: 20rpx;
			}
		}
	}

	.share-btn {
		margin: 10rpx 80rpx;
		border-radius: 50rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		text-align: center;
		justify-content: center;
		background-image: linear-gradient(to bottom, #FF5D5B, #FF001D);
		font-weight: bold;

		.share-text {
			font-size: 36rpx;
			font-weight: bold;
			background: linear-gradient(to bottom, #FBEFD6, #FFE2AB);
			-webkit-background-clip: text;
			color: transparent;
			display: inline-block;
		}
	}

	.page-box {
		position: relative;

		.invitation-bg {
			width: 100%;
		}

		.qr-share-box {
			position: absolute;
			top: 22vh;
			left: 0;
			right: 0;
			margin: 0 auto;

			.qr-icon {
				width: 328rpx;
				height: 328rpx;
				display: block;
				margin: 0 auto;
				margin-bottom: 206rpx;
			}


		}
	}
</style>
